<template>
  <div class="run-number">
    <ul>
      <li
        :style="isNaN(item) ? 'width: 0.3em' : selfWidthStyle"
        :class="{ 'number-item selfClass': !isNaN(item) }"
        v-for="(item, index) in computeNumber"
        :key="index"
      >
        <div v-if="!isNaN(item)">
          <span
            ref="numberItem"
            :style="{
              transform: `translate(-50%, -${Number(item) * 10}%)`,
              transition: selfTransitionStyle
            }"
            :class="selfTransitionClass"
            >0123456789
          </span>
        </div>
        <div v-else>{{ item }}</div>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { ElMenuItemGroup } from 'element-ui/types/menu-item-group'
import { amountFormat } from '@/filters/index'
@Component({
  name: 'run-number',
  components: {
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  @Prop({ default: 0 }) private number!: number
  @Prop({ default: '' }) private commaStyle!: ''
  @Prop({ default: '' }) private selfWidthStyle!: ''
  @Prop({ default: '' }) private selfTransitionClass!: ''
  @Prop({ default: '' }) private selfTransitionStyle!: ''
  // @Prop({ required: true }) private propExp2?: boolean
  private dataExp: any = ''
  private timer: any
  private newNumber = 302020
  get computedExp() {
    //computed 属性
    return true
  }

  get computeNumber() {
    return amountFormat(this.number, 0, '.', ',', false).split('')
  }
  created() {
    // 最早可以调用vue组件method的钩子
  }
  mounted() {
    //mounted 钩子
  }
  private methodExp() {
    // method创建地方
  }
}
</script>

<style lang="scss" scoped>
.run-number {
  color: #daf8ff;
  ul {
    display: block;
    overflow: hidden;
    white-space: nowrap; //处理块元素中的空白符和换行
    margin: 0;
    padding: 0;
    li {
      list-style: none;
      display: inline-block; //使li对象显示为一行
      height: 1em;
      width: 0.6em;
      & > div {
        vertical-align: top;
      }
    }
  }
  .number-item {
    & > div {
      position: relative;
      display: inline-block;
      width: 100%;
      height: 100%;
      writing-mode: vertical-rl;
      text-orientation: upright;
      overflow: hidden;
      & > span {
        font-size: 1em;
        transform: translate(0%, 0);
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
        transition: transform 0.5s ease-in-out;
      }
    }
  }
}
</style>
